import React, { useEffect, useState, useRef, forwardRef } from 'react'
import { connect } from 'dva'
import router from 'umi/router'
import checkColums from 'columns/deviceCheck'
import { Table, Tooltip, Button } from 'antd'
import ObjectList from 'components/common/ObjectList'
import Paging from 'components/common/paging'
import HeaderSearch from './component/HeaderSearch'
import GetActions from './component/actions'
import KeepAlive from 'react-activation'
import './index.styl'

const HeaderSearchRef = forwardRef((props, ref) => (
  <HeaderSearch {...props} cRef={ref} />
));

function DeviceCheck({ dispatch, location, commonAction: { catchObj }, deviceCheck: { list, modelList, serachParams } }) {
  const { params = {}, pathname } = location
  const { status = '', today = '', isRefresh = false } = params
  // 切换页码
  const [current] = useState(list && list.current || 1)
  const searchRef = useRef()
  useEffect(() => {
    dispatch({
      type: 'commonAction/uploadCatch',
      payload: {
        catchObj: {
          deviceCheck: [true, false]
        }
      }
    })
    return function cleanUp() {
      const nowPage = JSON.parse(localStorage.getItem('panes')).find(item => item.key === pathname)
      if (nowPage === undefined) {
        dispatch({
          type: 'deviceCheck/updateState',
          payload: {
            list: {}
          }
        })
        dispatch({
          type: 'deviceCheck/updateSerachParams',
          payload: {
            serachParams: {}
          }
        })
      }
    }
  }, [dispatch, pathname])
  // 初始化列表数据
  useEffect(() => {
    dispatch({
      type: 'deviceCheck/searchCheck',
      payload: {
        current,
        size: 10,
        ...serachParams
      }
    })
  }, [dispatch, current, serachParams])

  useEffect(() => {
    if (isRefresh) {
      searchRef.current.resetFields()
    }
  },[isRefresh])

  // 添加序号
  checkColums.list[0].render = (t, r, i) => (list.current - 1) * 10 + i + 1;
  checkColums.objectColumns[0].render = (t, r, i) => `${i + 1}`

  // 添加操作
  checkColums.list[checkColums.list.length - 1].render = (t) => (
    <GetActions t={t} handleRest={handleRest}/>
  )
  
  // 删除  启用  停用 清空上面筛选条件
  function handleRest() {
    searchRef.current.resetFields()
  }

  // 嵌套列表
  const [modelPage, setModelPage] = useState(1)
  const objectColumns = checkColums.objectColumns

  const visibleChange = (records) => {
    // 获取嵌套列表数据
    dispatch({
      type: 'deviceCheck/geModelLists',
      payload: {
        checkId: records.id,
        current: modelPage,
        size: '10'
      }
    })
  }

  const handleChangePage = (page, records) => {
    dispatch({
      type: 'deviceCheck/geModelLists',
      payload: {
        checkId: records.id,
        current: page,
        size: '10'
      }
    })
    setModelPage(page)
  }

  checkColums.list[checkColums.list.length - 3].render = (text, records) => (
    <div className='objectStyle'>
      <Tooltip
        onVisibleChange={() => visibleChange(records)}
        placement='bottom'
        title={<ObjectList
          handleChangePage={(page) => handleChangePage(page, records)}
          objectColumns={objectColumns}
          objectInfo={JSON.stringify(modelList) !== '{}' ? modelList : null}
        />}
        trigger='hover'
        overlayStyle={{ background: '#fff', width: '20rem' }}
      >
        <span className='objectText'>{text}</span>
      </Tooltip>
    </div>
  )

  // 新建点检计划
  const addEquipmentCheck = (value) => {
    // 清除model缓存
    dispatch({ type: 'deviceCheck/clean' })
    router.push('/deviceCheck/add')
  }

  // 分页器
  const handlePageChange = (page) => {
    dispatch({
      type: 'deviceCheck/updateSerachParams',
      payload: {
        serachParams: {
          ...serachParams,
          current: page
        }
      }
    })
  }

  return (
    <KeepAlive name='deviceCheck' when={catchObj.deviceCheck}>
      <div className='deviceCheck'>
        <HeaderSearchRef ref={searchRef} current={current} status={status} today={today} searchBtn={(v) => {
           dispatch({
            type: 'deviceCheck/updateSerachParams',
            payload: {
              serachParams: {
                ...v,
                current: 1
              }
            }
          })
        }} />
        <div className='listBox'>
          <Button type='primary' className='newBtn blue-button' onClick={() => addEquipmentCheck()}>新建点检计划</Button>
          <Table
            columns={checkColums.list}
            dataSource={list && list.records}
            pagination={false}
            bordered={true}
            className='self-table'
            rowKey={(t) => t.id}
          />
          <Paging
            total={list && list.total || 0}
            pageSize={10}
            handlePageChange={handlePageChange}
            pageCount={list && list.current || 0}
            pages={list && list.pages || 0}
          ></Paging>
        </div>
      </div>
    </KeepAlive>
  )
}

export default connect(({ deviceCheck, commonAction }) => ({
  deviceCheck, commonAction
}))(DeviceCheck)

